<template>
  <div class="app-container">
    <div class="filter-container">
      <el-card>
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-edit" @click="showPublishProblem">发布问题</el-button>
      </el-card>
    </div>
    <el-table
      :data="tableData"
      size="mini"
      style="width: 100%">
      <el-table-column type="index" :index="pageIndex" label="序号" min-width="40" align="center"></el-table-column>
      <el-table-column prop="questionName" label="作业题目" :show-overflow-tooltip="true" min-width="250" align="center">
        <template slot-scope="scope">
          {{scope.row.questionName ? scope.row.questionName :'暂无'}}
        </template>
      </el-table-column>
      <el-table-column prop="problemContent" label="问题内容" :show-overflow-tooltip="true" min-width="250" align="center">
        <template slot-scope="scope">
          <span v-html="scope.row.problemContent">{{scope.row.problemContent}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="addingTime" label="添加时间" min-width="80" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>{{scope.row.addingTime}}
        </template>
      </el-table-column>
      <el-table-column prop="studentName" label="学生" min-width="60" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="60" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 'true' ? 'success' : 'primary'">
            {{scope.row.status === 'true' ? '已回复' : '待回复'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作" min-width="60" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleCat(scope.$index)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="page.totalSize" :page.sync="page.pageNum" @pagination="changePage" />
    <publish-problem :show-publish="showPublish" @noShow="closePublish"></publish-problem>
  </div>
</template>
<script>
  import publishProblem from './components/publishProblem'
  import Pagination from '@/components/Pagination'
  import {getAllList,getDetail} from '@/api/problems'
  export default {
    components: { Pagination,publishProblem },
    data() {
      return {
        showPublish: false,
        tableData: [],
        page:{
          pageNum: 1,
          pageSize: 10,
          totalPage: 0,
          totalSize: 0
        },
      }
    },
    created(){
      this.getList()
    },
    methods: {
      changePage(val){
        this.page.pageNum = val
        this.getList()

      },
      getList(){
        getAllList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }).then(res =>{
          this.tableData = res.data.list
          this.page = res.data.page
        }).catch(err => {
          this.$message.error('请求失败！')
        })
      },
      handleCat(index){
        let pid = this.tableData[index].pid
        this.$router.push({ path: '/problems/problemDetail', query: { pid: pid }})
      },
      handleDownload(){

      },
      showPublishProblem(){
        this.showPublish = true
      },
      closePublish(){
        this.showPublish = false
        this.getList()
      },
    },
    computed: {
      pageIndex: function () {
        return (this.page.pageNum - 1) * this.page.pageSize + 1
      },

    },
  }
</script>
<style scoped></style>

